<template>
  <div class="chart_contain">
    <scroller>
      <div v-for="item,index in this.chatList" class="item" :key="item.id">
        <div class="item-cell" @click="itemClick(item)">
          <img class="item-img" :src="item.imgurl"/>
          <div style="display: inline-block;flex: 1;text-align: left;margin-left: 10px">
            <div style="display: flex">
              <span class="dissname" v-html="item.dissname"></span>
              <span class="item-time">刚刚</span>
            </div>
            <div style="height: 4px"></div>
            <span class="summary">点击发送消息</span>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>

  export default {
    name: "Chart",
    data() {
      return {
        chatList: [
          {
            dissname: '诸葛亮',
            dissid: 'zhugeliang',
            phone: '18312345678',
            imgurl: 'http://static.bbs.9wee.com/attachment/forum/201306/07/210751qbp4p4c5yzhhbpym.jpg',
            location: '蜀国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过搜索手机号添加',
            summary: '点击发送消息',
            unread: '',
            time: '08:25'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '华佗',
            dissid: 'huatuo',
            phone: '18312345678',
            imgurl: 'http://img1.gamedog.cn/2014/01/23/30-1401230942040.jpg',
            location: '东汉',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有1个未读消息',
            unread: 1,
            time: '8月18日'
          },
          {
            dissname: '诸葛亮',
            dissid: 'zhugeliang',
            phone: '18312345678',
            imgurl: 'http://static.bbs.9wee.com/attachment/forum/201306/07/210751qbp4p4c5yzhhbpym.jpg',
            location: '蜀国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过搜索手机号添加',
            summary: '点击发送消息',
            unread: '',
            time: '08:25'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '华佗',
            dissid: 'huatuo',
            phone: '18312345678',
            imgurl: 'http://img1.gamedog.cn/2014/01/23/30-1401230942040.jpg',
            location: '东汉',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有1个未读消息',
            unread: 1,
            time: '8月18日'
          },
          {
            dissname: '诸葛亮',
            dissid: 'zhugeliang',
            phone: '18312345678',
            imgurl: 'http://static.bbs.9wee.com/attachment/forum/201306/07/210751qbp4p4c5yzhhbpym.jpg',
            location: '蜀国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过搜索手机号添加',
            summary: '点击发送消息',
            unread: '',
            time: '08:25'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '华佗',
            dissid: 'huatuo',
            phone: '18312345678',
            imgurl: 'http://img1.gamedog.cn/2014/01/23/30-1401230942040.jpg',
            location: '东汉',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有1个未读消息',
            unread: 1,
            time: '8月18日'
          },
          {
            dissname: '诸葛亮',
            dissid: 'zhugeliang',
            phone: '18312345678',
            imgurl: 'http://static.bbs.9wee.com/attachment/forum/201306/07/210751qbp4p4c5yzhhbpym.jpg',
            location: '蜀国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过搜索手机号添加',
            summary: '点击发送消息',
            unread: '',
            time: '08:25'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '诸葛亮',
            dissid: 'zhugeliang',
            phone: '18312345678',
            imgurl: 'http://static.bbs.9wee.com/attachment/forum/201306/07/210751qbp4p4c5yzhhbpym.jpg',
            location: '蜀国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过搜索手机号添加',
            summary: '点击发送消息',
            unread: '',
            time: '08:25'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '司马懿',
            dissid: 'simayi',
            phone: '18312345678',
            imgurl: 'http://www.e3ol.com/biography/upfiles/2008/20089822301342545.jpg',
            location: '魏国',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有3个未读消息',
            unread: 3,
            time: '昨天'
          },
          {
            dissname: '华佗',
            dissid: 'huatuo',
            phone: '18312345678',
            imgurl: 'http://img1.gamedog.cn/2014/01/23/30-1401230942040.jpg',
            location: '东汉',
            album: 'http://src.zhigame.com/news/20130123/2013012310413268.jpg',
            source: '通过扫一扫添加',
            summary: '有1个未读消息',
            unread: 1,
            time: '8月18日'
          }
        ],
      }
    },
    methods: {
      itemClick(item) {
        // this.$vux.toast.text(index,'middle')
        this.$router.push({
          name:'chartRoom',
          params:{
            name:item.dissname
          }
        })
      }
    }
  }
</script>

<style scoped>
  .chart_contain {
    position: fixed;
    top: 46px;
    bottom: 50px;
    left: 0px;
    right: 0px;
    text-align: left;
  }

  .item {

  }

  .item-cell {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.4);
    text-align: center;
  }

  .item-img {
    width: 40px;
    height: 40px;
    margin: auto;
  }

  .dissname {
    font-weight: bold;
    font-size: 14px;
    flex: 1;
  }

  .summary {
    margin-top: 10px;
    font-size: 14px;
  }

  .item-time {
    font-size: 12px;
    color: rgba(12, 12, 12, 0.74);
  }
</style>
